<%@page import="com.opensymphony.xwork2.ActionContext"%>
<%@page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="com.milk_shop.model.Food" %>
<%@page import="com.milk_shop.model.PageInfo" %>
<%@taglib uri="/struts-tags" prefix="s" %>
<%@page import="java.util.List"%>
<% 
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<% 
   List<Food> foods=(List<Food>)ActionContext.getContext().get("foods");
   int currentPage=Integer.parseInt(ActionContext.getContext().get("currentPage").toString());
   int totalPage=Integer.parseInt(ActionContext.getContext().get("totalPage").toString());
%>
<base href="<%=basePath %>"/>
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>四季奶坊</title>
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
  <script src="js/httpVueLoader.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
  <style>
    .manage-btn {
      margin-bottom: 60px;
    }

    .milkyTea {
      width: 65%;
      margin: 0 auto;
    }

    .page {
      margin: 20px;
      text-align: right;
    }
.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #409EFF;
    border: 0 solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #000;
    background: #db7903;
    border-color: #ccc;
    text-decoration: none
}

  </style>
</head>
<body>
<div id="app">
    <el-container style="height: 650px;">
      <sider-component></sider-component>
      <div class="milkyTea">
        <div class="manage-btn">
          <h2>食品图管理</h2>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="食品名称" width="180">
          </el-table-column>
          <el-table-column prop="image1" label="实体图1" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image1" width="30px" height="30px" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="image2" label="实体图2" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image2" width="30px" height="30px" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="image3" label="实体图3" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image3" width="30px" height="30px" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="image4" label="实体图4" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image4" width="30px" height="30px" alt="">
            </template>
          </el-table-column>
          <el-table-column label="上传" width="180" align="center">
                
          <template slot-scope="scope">     
          <form name="f3" action="manage/upload" method="post" enctype = "multipart/form-data">
	        <a href="javascript:;" class="a-upload">
	        <input type="file"  name="file" multiple="multiple"/><span style="color:#fff">选择文件</span>
	        <input name="foodId" :value="scope.row.foodId" type="hidden"/>
	        </a>
	        <br/><el-button native-type="submmit" size='SMALL' id="but_submit">上传</el-button>
	      </form>
	      </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
            <el-button size="small" type="danger" @click="deleteData(scope.row.foodId)">批量删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
           background layout="prev, pager, next" @current-change='toPage' @prev-click="pre" @next-click="next"
          :current-page="<%=currentPage %>"
          :total="<%=totalPage %>"
          :page-size="1">
          </el-pagination>
        </div>

        <el-dialog title="删除" :visible.sync="deleteDialogVisible">
          <el-table :data="tableData">
            <el-table-column prop="name" label="食品名称">
            </el-table-column>
            <el-table-column label="删除">
              <template>
                <el-button type="danger"  icon="el-icon-delete" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
      </div>
    </el-container>
  </div>
  <script>
    Vue.use(httpVueLoader);

    new Vue({
      el: "#app",
      components: {
        'sider-component': 'url:component/SiderNav.vue',
      },
      data: {
        deleteDialogVisible: false,
        tableData: [
          <%for(Food food :foods){%>{
          currentPage:'<%=currentPage%>',
          foodId:'<%=food.getId()%>',
          name: '<%=food.getName() %>',
          image1: '<%=food.getDetileImages().size()>0?food.getDetileImages().get(0).getUrl():""%>',
          image2: '<%=food.getDetileImages().size()>1?food.getDetileImages().get(1).getUrl():""%>',
          image3: '<%=food.getDetileImages().size()>2?food.getDetileImages().get(2).getUrl():""%>',
          image4: '<%=food.getDetileImages().size()>3?food.getDetileImages().get(3).getUrl():""%>',         
        },
        <%}%>
        ]
      },
      methods: {
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        toPage(currentPage) {
        	window.location.href="manage/getImage?page.pageSize=4&page.currentPage="+currentPage;
        },
        pre(){
        	
        },
        next(){
        	
        },
        deleteData(foodId){
        	window.location.href="manage/deleteImage?foodId="+foodId;
        },
      },
    })
  </script>
</body>
</html>